<template>
  <div class="page-content">
    <binTable
      :tableColumnProps="tableColumnProps"
      :listData="pageList"
      :listCount="pageListCount"
      v-model:page="pageInfo"
    >
      <!-- 操作按钮 -->
      <template #handle="scope">
        <el-button link type="primary" :icon="Edit" @click="handleEditClick(scope.row)">编辑</el-button>
        <el-button link type="danger" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </binTable>
    
  </div>
</template>

<script  setup>
import { Delete, Edit } from '@element-plus/icons-vue';
import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'
import binTable from '@/base-ui/table'
import { binMsg } from '@/global/api.js'

const props = defineProps({
  // table 的配置文件
  tableColumnProps: {
    type: Object,
    required: true
  },
  // 当前页面所属
  pageName: {
    type: String,
    required: true
  },
  moduleName: {
    type: String,
    required: true
  }
})
const store = useStore()

// 转递给 table 组件的分页数据
const pageInfo = ref({
  page_num: 1,
  page_size: 10
})
const emit = defineEmits(['pageInfoChange', 'handleEditClick'])

// 当页数发生变化，就通知父组件查询数据
watch(
  () => pageInfo.value,
  (newVal) => {
    emit('pageInfoChange', newVal)
  },
  {
    immediate: true
  }
)

// 数据列表
const pageList = computed(() => store.getters[`${props.moduleName}/pageList`](props.pageName))

// 数据列表数量
const pageListCount = computed(() => store.getters[`${props.moduleName}/pageCount`](props.pageName))

// 刷面刷新，第一次根据name（空值）进行查询，后面则根据查询条件和分页参数进行查询
const getPageList = async (formValue, pageInfo) => {
  binMsg().closeAll()
  // 非模糊查询的选项，都需要输入内容
  // if (formValue.label !== 'name' && formValue.label !== 'major' && formValue.label !== 'college') { 
  //   if (formValue.value === '') {
  //     return binMsg('warning', '请输入查询内容！')
  //   }
  // }
  // 查找用户数据
  store.dispatch(`${props.moduleName}/searchAction`, {  pageName: props.pageName,...formValue, ...pageInfo })
}


// 点击编辑，发出事件给父组件
const handleEditClick = async (row) => {
  emit('handleEditClick', row)
}

// 删除用户
const handleDelete = (row) => {
  binMsg().closeAll()
  store.dispatch(`${props.moduleName}/deleteAction`, { pageName: props.pageName, id: row.id })
}


defineExpose({
  getPageList
})
</script>

<style lang="less" scoped>
.userDetail {
  display: flex;
  .avatar {
    margin-top: 15px;
  }
  .info {
    font-size: 16px;
    margin-left: 40px;
  }
}
</style>
